<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <style>
        .c{
            background-color: #444444;
        }
    </style>

    <script>
        // jQuery();
        // $(document).ready(function(){
        //     alert("Hello");
        // });

        $(function(){
            // alert("Hello");

            // alert(document.getElementById("h").innerHTML);

            // alert($("#h").html());

            // alert($("#h")[0].innerHTML);

            // alert($(document.getElementById("h")).html());

            $("#h").click(function(){
                alert("Hello");
            });

            // alert($("li:eq(1)").html());
            // alert($("li").eq(1).html());

            $("div:first").addClass("c");

            $("div p:even").css("background-color","#ff2222");

            $("div p:odd").css("background-color","#2222ff");

            $("#bigger").click(function(){
                var fontSize=$("div:first").css("font-size");
                $("div:first").css("font-size",parseInt(fontSize)+5+"px");
            });

            $("#smaller").click(function(){
                var fontSize=$("div:first").css("font-size");
                $("div:first").css("font-size",parseInt(fontSize)-5+"px");
            });

            $("#show").click(function(){
                // $("div:first").css("display","block");
                // $("div:first").show();
                $("div:first").fadeIn(3000);
            });

            $("#hidden").click(function(){
                // $("div:first").css("display","none");
                // $("div:first").hide();
                $("div:first").fadeOut(3000);
            });


            $("#move").click(function(){
                $("#d1").animate({"left":"600px","width":"300px","height":"300px"},3000)
                        .animate({"top":"300px"},3000)
                        .animate({"left":"0px","top":"0px","width":"100px","height":"100px"},3000)

                // setTimeout($("#move").click,9000);

                // alert(this.innerHTML)
                // alert($(this).html())

                setTimeout($(this).click,9000);
            });

            $("#load").click(function(){
                $("#i1").val("abc");
                // $("#image").attr("src","../image/a.png");
                $("#image").prop("src","../image/a.png");
                $("#d2").html("<h1>Hello</h1>");
                $("#d3").text("<h1>Hello</h1>");
            });

            $("#add").click(function(){
                var s="<li>"+$("#t1").val()+"</li>";
                // $("#u1").append(s);
                // $("#u1").append($(s));
                $(s).appendTo($("#u1"));
            });

            $("#u1 li").dblclick(function(){
                // var l=$(this).clone();
                var l=$(this).clone(true);
                $("#u1").append(l);
            });

            var i=1;
            $("#more").click(function(){
                // var d=$("#fileDiv").clone(true);
                var d=$("div:contains('文件')").first().clone(true);

                d.prop("id","fileDiv"+i);

                $(this).before(d);

                // $("#fileDiv"+i+" input").val("");
                $("input",d).val("");

                i++;
            });

            $("a[name='delete']").click(function(){

                // if($("div:contains('文件')").length==1){
                if($("div:has(input[type='file'])").length==1){
                    return;
                }

                $(this).parent().remove();
            });

            $("#showValue").click(function(){
                $("div input[type='file']").each(function(index,domElement){
                    // console.log($(domElement).val());
                    console.log($(this).val());
                });
            });

            $("#showForm").click(function(){
                var values=$("#f").serialize();
                console.log(values);
            });


            $("#a1").click(function(event){
                // alert("a1...");
                console.log(event);
                console.log(event.clientX,event.clientY);
            });

            // var str="click mouseout";
            // $("#a1").bind(str,function(){
            //     alert("a1...");
            // });
        });


    </script>



</head>
<body>
    <h1 id="h">Hello</h1>

    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>

    <hr/>

    <div>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
        <p>sadklfjslkdajflksadjflksdajflkjsadfjasf</p>
    </div>


    <input type="button" value="放大" id="bigger"/>
    <input type="button" value="缩小" id="smaller"/>
    <input type="button" value="显示" id="show"/>
    <input type="button" value="隐藏" id="hidden"/>

    <hr/>

<!--    <input type="button" value="移动" id="move"/>-->
    <a href="javascript:;" id="move">移动</a>

    <div id="d1" style="width: 100px;height: 100px;background-color: red;position: relative;"></div>

    <hr/>

    <a href="javascript:;" id="load">加载</a><br/>

    <input type="text" id="i1"/><br/>
    <img id="image"><br/>
    <div id="d2"></div>
    <div id="d3"></div>


    <hr/>


    <input id="t1" type="text"/>
    <input type="button" value="追加" id="add"/>
    <ul id="u1">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>


    <hr/>


    <div id="fileDiv">
        文件：<input type="file"/><a name="delete" href="javascript:;">删除</a>
    </div>
    <input type="button" value="上传更多" id="more"/>
    <input type="button" value="获取文件名" id="showValue"/>


    <hr/>


    <form id="f" action="#">
        用户名：<input type="text" name="username"/><br/>
        密码：<input type="password" name="password"/><br/>
        电话：<input type="text" name="phone"/><br/>
    </form>

    <a href="javascript:;" id="showForm">获得表单数据</a>


    <hr/>

    <a href="javascript:;" id="a1">点击</a>






































    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>





</body>
</html>